<script lang="ts" setup>
import { computed, ref, unref } from 'vue';
import { assign } from 'lodash-es';
import { isBoolean } from '@/utils/is';

const props = defineProps({
    icon: {
        type: String,
        default: '',
    },
    size: {
        type: [Number, String],
        default: '',
    },
    color: {
        type: String,
        default: '',
    },
});

const iconSize = ref<string | boolean>(props.size ? `${props.size}rpx` : false);
const style = computed(() => {
    let ISize = unref(iconSize);
    return assign({ width: isBoolean(ISize) ? '' : ISize, height: isBoolean(ISize) ? '' : ISize }, { color: props.color });
});

const emit = defineEmits(['click']);
const onClick = () => {
    emit('click');
};
</script>
<template>
    <view ref="elRef" :class="['iconify', icon]" :style="style" @click="onClick" />
</template>
<style lang="scss" scoped>
.iconify {
    display: inline-block;
    vertical-align: middle;
    height: 44rpx;
    width: 44rpx;
    color: inherit;
    &:hover {
        cursor: pointer;
        opacity: 0.8;
    }
}
</style>
